<template>
	<view class="message-box">
		<view class="message-box__pic">
			<u-avatar :src="pic" size="110" style="margin-right: 10px;"></u-avatar>
		</view>
		<view class="message-box__text">
			<view class="message-box__text__userfrom">{{userfrom}}</view>
			<view class="message-box__text__message">{{message}}</view>
		</view>
		<view class="message-box__time">
			{{time}}
		</view>

		<!-- <u-line color="#e0e0e0" /> -->
	</view>
</template>

<script>
	export default {
		name: "articleBox",
		props: {
			pic:String,
			userfrom:String,
			message:String,
			time:String
		},
		mounted() {

		},
		data() {
			return {

			};
		},
		methods: {

		},
	};
</script>

<style lang="less">
	@import '../custom.less';

	.message-box {
		margin: @uni-spacing-row-lg @uni-spacing-col-lg;
		display: flex;
		align-items: center;
		padding-bottom: 10px;
		border-bottom: 0.5px solid #b9bed3;
	
		&__pic{
			
		}
		&__text{
			display: flex;
			flex-direction: column;
			
			&__userfrom {
				margin-bottom: 10px;
				font-weight: bold;
			}

			&__message {
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 1;
				/** 显示的行数 **/
				overflow: hidden;
				/** 隐藏超出的内容 **/
				font-size: small;
				color: #5e6671;
			}

		}
		&__time{
			margin-left: auto ;
			margin-right: 20px;
			// font-size: 8px;
			color: #888888;
		}
		
	}
</style>
